<template>
  <div class="home">
    <el-container>
      <el-header
        style="
          left: 0px;
          top: 0px;
          width: 100%;
          right: 0;
          z-index: 5;
          margin-top: 0;
        "
      >
        <el-form
          ref="form"
          :model="form"
          rules="rules"
          inline="true"
          label-width="120px"
          class="formStyle"
          size="mini"
        >
          <el-form-item v-if="this.StepSN == 0">
            <el-button type="primary" @click="open" icon="el-icon-tickets"
              >添加人员</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              icon="el-icon-tickets"
              @click="confirmData(0)"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="confirmData(2)"
              >提交</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              @click="batchdelete()"
              icon="el-icon-delete-solid"
              size="mini"
              >批量作废</el-button
            >
          </el-form-item>

          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="confirmData(3)"
              >退回上一步</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="confirmData(2)"
              >审核</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>

      <el-main style="margin: 3px 10px 10px 10px">
        <span
          style="
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            width: 100%;
            padding: 3px 0 5px 0;
          "
        >
          <span>招聘餐补申请表</span>
          <span style="margin-left: 10px">
            <svg-icon v-if="this.form.Status == 0" icon-class="Editing" />
            <svg-icon v-if="this.form.Status == 1" icon-class="ingAudit" />
            <svg-icon v-if="this.form.Status == 2" icon-class="Finish" />
          </span>
        </span>

        <el-form
          ref="form"
          :model="form"
          rules="rules"
          inline="true"
          label-width="120px"
          class="formStyle"
          size="mini"
        >
          <el-form-item label="单据编号：">{{
            form.RecruitmentFoodSupplementNo
          }}</el-form-item>

          <el-form-item label="填单人：">{{ form.CreatedByName }}</el-form-item>

          <el-form-item label="单位名称：">
            <el-select
              :disabled="StepSN == 0 ? false : true"
              v-model="form.Organizeid"
              placeholder="请选择"
              @change="select_Month"
            >
              <el-option
                :label="item.Organizename"
                :value="item.Organizeid"
                v-for="item in selectDepList"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份：">
            <el-date-picker
              :disabled="StepSN == 0 ? false : true"
              type="month"
              v-model="form.RecruitmentAllowanceDate"
              @change="select_Month"
              placeholder=" 月份"
            />
          </el-form-item>
        </el-form>

        <el-table
          :data="formDetail"
          :height="tableHeight"
          style="width: 100%; margin-top: 0px"
          highlight-current-row
          border
          stripe
          :header-cell-style="getRowClass"
          current-row-key
          :row-class-name="tableRowClassName"
          max-height="640"
          show-summary
        >
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column align="center" label="分公司名称">
            <template slot-scope="scope">{{ scope.row.Organizename }}</template>
          </el-table-column>

          <el-table-column align="center" label="工号" width="90">
            <template slot-scope="scope">{{ scope.row.UserCode }}</template>
          </el-table-column>

          <el-table-column align="center" label="姓名" width="100">
            <template slot-scope="scope">{{ scope.row.UserName }}</template>
          </el-table-column>

          <el-table-column align="center" label="入职日期" width="100">
            <template slot-scope="scope">{{ scope.row.JoinedDate }}</template>
          </el-table-column>

          <el-table-column align="center" label="离职日期" width="100">
            <template slot-scope="scope">{{
              scope.row.DimissionDate
            }}</template>
          </el-table-column>

          <el-table-column align="center" label="职位" width="100">
            <template slot-scope="scope">{{ scope.row.JobName }}</template>
          </el-table-column>

          <el-table-column align="center" label="职级" width="60">
            <template slot-scope="scope">{{ scope.row.JobLevel }}</template>
          </el-table-column>

          <el-table-column align="center" label="镇内招聘天数" width="100">
            <template slot-scope="scope">
              <el-input
                :disabled="StepSN == 0 ? false : true"
                v-model="scope.row.WithinWorkDate"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="金额"
            prop="WithinCost"
            width="100"
          >
            <template slot-scope="scope">
              <el-input
                :disabled="StepSN == 0 ? false : true"
                v-model="scope.row.WithinCost"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" label="镇外招聘天数" width="100">
            <template slot-scope="scope">
              <el-input
                :disabled="StepSN == 0 ? false : true"
                v-model="scope.row.ExternalWorkDate"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="金额"
            prop="ExternalCost"
            width="100"
          >
            <template slot-scope="scope">
              <el-input
                :disabled="StepSN == 0 ? false : true"
                v-model="scope.row.ExternalCost"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="招聘餐补"
            prop="Cost"
            width="100"
          >
            <template slot-scope="scope">
              <el-input
                :disabled="StepSN == 0 ? false : true"
                v-model="scope.row.Cost"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            width="100"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope)" circle></el-button> -->
              <el-button
                type="danger"
                v-show="StepSN == 0"
                icon="el-icon-delete"
                @click="delData(scope, 5)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-main style="margin: 1px 10px">
        <span style="font-size: 20px; font-weight: blod; padding: 10px"
          >工作流：</span
        >
        <el-timeline
          :reverse="true"
          ref="ListLog"
          :model="ListLog"
          style="margin: 10px"
        >
          <el-timeline-item
            v-for="(activity, index) in ListLog"
            :key="index"
            :timestamp="activity.CreateDateTime"
          >
            {{ activity.Remark }}
          </el-timeline-item>
        </el-timeline>
      </el-main>
      <el-dialog :visible.sync="dialogshow" width="700px" top="20px">
        <el-tabs type="border-card">
          <el-tab-pane label="作废名单">
            <el-form :inline="true" label-width="120px" label-position="left">
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 20, maxRows: 20 }"
                  placeholder="名单"
                  v-model="deleteData"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="作废原因"
                  v-model="deleteReason"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="deleltAccount">作废</el-button>
        </div>
      </el-dialog>
    </el-container>

    <el-dialog
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :title="人员资料"
      customClass="customWidth"
      width="60%"
    >
      <el-form :model="name" label-width="80px" label-position="left">
        <v-RecruitersFormOpen
          :ParmType="ParmType"
          @FunRecruitersAdd="FunRecruitersAdd"
        ></v-RecruitersFormOpen>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.home {
  height: 100%;
}

.customWidth {
  width: 80%;
  height: 300px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
.el-table .warning-row {
  background: oldlace;
}

.svg-icon[data-v-c8a70580] {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-bottom: -15px;
}
</style>

<script>
import path from "path";
import { deepClone } from "@/utils";

import { updateForm, DeleteRow } from "@/api/RecruitmentFoodSupplementForm";
import elementIcons from "../icons/element-icons";
import vRecruitersFormOpen from "./RecruitersFormOpen";

export default {
  components: {
    vRecruitersFormOpen,
  },

  props: {
    inputName: String,
    required: true,
  },
  data() {
    return {
      tableHeight: null,
      dialogshow: false,
      deleteData: "",
      deleteReason: "",
      activeName: "first",
      form: [],
      msg: "",
      selectlist: [],
      StepSN: -1,
      ListLog: [],
      formDetail: [],
      selectDepList: [],
      reverse: true,
      multipleTable: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      where: "",
      rules: {
        CustomerNo: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created: function () {
    this.DataListData();
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 220 + "px";
    });
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#F5F5F5;color:#606266;text-align:center;font-size:9px;font-weight:800;";
      } else {
        return "";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.rowIndex = rowIndex;
    },
    async DataListData() {
      // 提交数据，需要修改

      if (this.inputName == null) {
        this.inputName = this.$route.query.billID;
      }

      const result = await updateForm({
        billID: this.inputName,
        IsPostBack: false,
      });

      this.form = result.data1.Table[0];
      result.data2.Table.forEach((m) => {
        if (m.JoinedDate != null) {
          m.JoinedDate = m.JoinedDate.substring(0, 10);
        }
        if (m.DimissionDate != null) {
          m.DimissionDate = m.DimissionDate.substring(0, 10);
        }
        if (m.Organizename != null) {
          result.date4.Table.forEach((b) => {
            if (m.Organizename.includes(b.Organizename)) {
              m.Organizename = b.Organizename;
            }
          });
        }
      });
      this.formDetail = result.data2.Table;

      this.selectlist = result.data3.Table;
      this.msg = result.msg;

      this.ListLog = result.ListLog;
      this.StepSN = result.StepSN;
      this.selectDepList = result.date4.Table;
      // this.selectlist = result.data3.Table;
      // this.Customerlist = result.data4.Table;

      // if (result.code === 20000) {

      // } else {
      //   this.$notify({
      //     title: 'error',

      //     message: result.message,
      //     type: 'error'
      //   })
      // }
    },
    async confirmData(submit) {
      // 提交数据，需要修改

      const Fresult = true;
      if (submit == 2) {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            this.$notify({
              title: "不能提交",
              dangerouslyUseHTMLString: true,
              message: "不可为空，不能提交",
              type: "error",
            });
            Fresult = false;
            return false;
          }
        });
      }

      if (Fresult) {
        const result = await updateForm({
          HeadDate: JSON.stringify(this.form),
          BodyDate: JSON.stringify(this.formDetail),
          billID: this.form.RecruitmentFoodSupplementNo,
          IsPostBack: true,
          submit: submit,
        });

        this.form = result.data1.Table[0];
        this.formDetail = result.data2.Table;
        this.ListLog = result.ListLog;
        this.StepSN = result.StepSN;
        this.selectDepList = result.date4.Table;
        this.msg = result.msg;
        if (result.code === 20000) {
          //const { description, key, name } = this.EditObj
          this.dialogVisible = false;
          this.$notify({
            title: this.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
          this.getDataList();
          this.roles = [];
        } else {
          this.$notify({
            title: this.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      }
    },
    //editUserInfo(index) {
    //  this.isEditObj[index].a = false;
    //}
    //checkEditUserInfo(index) {      //编辑用户信息
    //  this.isEditObj[index].a = true;
    //},
    //cancelEditUserInfo(index) {
    //  this.isEditObj[index].a = true;
    //}

    // 删除方法
    // 删除选中行
    delData({ $index, row }, typesID) {
      this.$prompt("请填写作废原因：", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (value == "" || value == null) {
            this.$notify({
              title: "作废失败",
              dangerouslyUseHTMLString: true,
              message: "作废原因不能为空。",
              type: "error",
            });
          } else {
            if (typesID == 5) {
              this.formDetail.splice($index, 1);
            }

            if (row.ID == null) {
              return false;
            }

            const result = await DeleteRow({
              ID: row.ID,
              billID: this.inputName,
              types: typesID,
              IsPostBack: false,
              Remark: value,
            });

            this.$message({
              type: "success",
              message: "已作废!",
            });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addRow(types) {
      let list = {};

      if (types == 1) {
        this.formDetail.push(list);
      }
    },
    //批量作废
    batchdelete() {
      this.dialogshow = true;
    },
    async deleltAccount() {
      if (
        this.deleteReason == "" ||
        this.deleteReason == null ||
        this.form.RecruitmentAllowanceDate == "" ||
        this.form.RecruitmentAllowanceDate == null
      ) {
        this.$notify({
          title: "作废失败",
          dangerouslyUseHTMLString: true,
          message: "作废原因、时间不能为空。",
          type: "error",
        });
      } else {
        const result = await DeleteRow({
          time: JSON.stringify(this.form.RecruitmentAllowanceDate),
          billID: this.inputName,
          Remark: this.deleteReason,
          deleteData: this.deleteData,
          deleteType: 2,
          types: 5,
        });
        if (result.code === 20000) {
          this.dialogshow = false;
          this.$notify({
            title: "success",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "success",
          });
          this.DataListData();
        } else {
          this.$notify({
            title: "error",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "error",
          });
        }
      }
    },
    canceldelete() {
      this.dialogshow = false;
      this.deleteData = "";
      this.deleteReason = "";
    },

    select_status(val) {
      this.$forceUpdate();
    },
    open(type) {
      this.ParmType = type; //传入参数
      this.dialogFormVisible = true;
    },
    async select_Month(val) {
      const result = await updateForm({
        billID: this.form.RecruitmentFoodSupplementNo,
        IsPostBack: false,
        Organizeid: this.form.Organizeid,
        Month: JSON.stringify(this.form.RecruitmentAllowanceDate),
      });

      this.formDetail = result.data2.Table;
    },
    FunRecruitersAdd: function (Rows, ParmType) {
      //添加部门

      // this.multipleTable=Rows[0];

      for (let v of Rows) {
        this.multipleTable = v;
        let row = {
          UserCode: this.multipleTable.UserCode,
          UserName: this.multipleTable.UserName,
          Organizeid: this.multipleTable.Organizeid,
          Organizename: this.multipleTable.Organizename,
          JobName: this.multipleTable.JobName,
          JobLevel: this.multipleTable.JobLevel,

          LeaveDate: this.multipleTable.LeaveDate,
        };

        this.formDetail.push(row);
      }

      this.dialogFormVisible = false;
    },
  },
};
</script>


